<template>
  <view style="background-color: #f3f5f7;height: 100vh;" >
    
             <u-navbar :is-back="true"  :custom-back='BackM' title="超时订单" back-text='' >
         <view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;" >
			</view>
         </u-navbar>


 <view
        class="totle-price"
        style="
          font-size: 0.72rem;
          padding: 0.5rem;
          font-family: PingFang SC;
          font-weight: 300;
          color: #666666;
          display: flex;
          justify-content: center;
        "
      >
        超时订单数:{{repairLists.length}}个
      </view>

        <view style="background-color: #f3f5f7;padding: 0rem 1rem 1rem 1rem;" class="repairListsP">
        
          <view  class="repairLists"  v-for="(item,index) in repairLists" :key="index">
                        <view class="repairLists-child"  >

                        <view class="repairLists-top">
                                <view style="display: flex;align-items: center;">
                                    <image style="width: 1rem;height:1rem;margin-right: 0.3rem;" src="../../style/image/order/charge.png" alt="">
                                    <view>
										<span style="font-size: 0.72rem;font-family: PingFang SC;font-weight: 300;color: #02AF74;" >({{item.modelsName}})</span>
										<span style="font-size: 0.72rem;font-family: PingFang SC;font-weight: 300;">{{item.orderSn}}</span></view>
                                </view>

                                <view>{{orderStatusString(item.orderStatus)}}</view>
                        </view>

                            <view class="repairLists-head">
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  商户名称
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  {{item.outShopName}}
                </view>
              </view>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  充电宝SN码
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  {{item.bankSn}}
                </view>
              </view>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  底座SN码
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  {{item.outSn}}
                </view>
              </view>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  租借时间
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  {{item.rentDate}}
                </view>
              </view>
            </view>
                        </view>


              <view :style="{ display: 'flex',justifyContent: 'center',padding: '0.5rem'}">
                <u-modal v-model="showModel" title="结束订单" :mask-close-able="true" @confirm="confirmModel">
                	<view class="slot-content">
                		<view class="" style="padding-left: 15px;">
                			<view @click="endOrderShow" class="" style="display: flex;justify-content: space-between;position: relative;align-items: center;padding: 20px 0 8px 0;">
                				<text>操作类型</text>
                				<input type="text" v-model="endOrderDic.name" disabled="true" placeholder="请选择" style="margin-right: 30px;text-align: right;width: 65%;"/>
                						<u-icon name="arrow-right" style="position: absolute;z-index:999;color: #ccc;top: 42%;right: 10px;"></u-icon>
                			</view>
                					<view v-if="endOrderDic.name == '指定金额'" class="" style="display: flex;padding: 8px 0;border-top: 1px solid #f3f4f7;">
                						<text>指定金额</text>
                						<input type="number" v-model="endOrderDic.money" placeholder="请输入金额" style="text-align: right;width: 71%;"/>
                					</view>
                			<view class="" style="display: flex;padding: 8px 0;border-top: 1px solid #f3f4f7;">
                				<text>备注</text>
                				<input type="text" v-model="endOrderDic.description" placeholder="请输入备注" style="text-align: right;width: 83%;"/>
                			</view>
                		</view>
                	</view>
                </u-modal>
				<view class="repairBtn" @click="closeOrder(item)">结束订单</view>
              </view>
            </view>
			
			<!-- <u-loadmore v-show="loadmoreModal" :status="loadStatus" :load-text="loadText"/> -->
			<uni-load-more  @clickLoadMore="clickLoadMore"  :content-text="contentText" :status="status" ></uni-load-more>
			<!-- <u-empty   style="margin-top:0rem;" v-if="repairLists.length==0" text="暂无数据" mode="data"></u-empty> -->
			
        </view>
		<u-select v-model="isEndOrder" mode="mutil-column" value-name="code" label-name="name" :list="endOrderList" @confirm="endOrderChange"></u-select>
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import { userOrderListRenting } from "../../utils/uniApi";
import { endOrder,getOrderEnumBox } from "../../utils/uniApi";

import uniLoadMore from '../loadMore/uni-load-more.vue'

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
  components:{
  	 'uniLoadMore':uniLoadMore
  }
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public repairLists = [];//超时订单
  public pageN: any = 1;//分页的页数
  //加载参数
  // public loadStatus = "nomore";
  // public loadText = {
  //   loadmore: "轻轻上拉",
  //   loading: "努力加载中",
  //   nomore: "暂无更多数据",
  // };
  // public loadmoreModal = true;
  public  status='more'
  
  public  contentText={
  					contentdown: '下拉或点击查看更多',
  					contentrefresh: '加载中',
  					contentnomore: '没有更多'
  				}
  public continueTypes = true;
  
  public showModel = false;
  public isEndOrder: any = false;//选择结束订单的问题
  public endOrderDic: any={name:'',code:'',orderId:'',orderSn:'',money:'',description:''};//结束订单 选中问题dic
  public endOrderList: any=[];//结束订单 问题list

  created() {}
  
  onHide(){
  	  uni.hideLoading();
  }
  
  //下拉刷新
  onPullDownRefresh() {
      setTimeout(function () {
        uni.redirectTo({
          url: "../../pages/order/overtimeOrder",
        });
        uni.stopPullDownRefresh();
      }, 1000);
  }
  //上拉加载更多
  onReachBottom() {
	  if(!this.continueTypes){
	  		  return
	  }
    this.pageN = this.pageN + 1;
    this.orderListData(this.pageN);
  }
  clickLoadMore(){
  	  this.onReachBottom()
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
	this.orderListData(this.pageN);
	this.getOrderEnumBox()
  }
  
  BackM() {
    uni.navigateBack({
       delta: 1,
    });
  }
  
  //订单状态转换
  orderStatusString(status: string){
  	  if(status == "timeout"){
  		  return '超时'
  	  } else if (status == "end"){
  		  return '完结'
  	  }else if (status == "ing"){
  		  return '租赁中'
  	  }else{
		  return ''
	  }
  }
  //结束订单下拉框数据
  getOrderEnumBox(){
  	  let params = {
  	    userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  getOrderEnumBox(params).then((res: any) => {
  	      if(res.data.code==200){
  			  this.endOrderList.push(res.data.data)
  	      }else{
  	      
  	      }
  	  });
  }
  //手动取消结束订单
  closeOrder(item:any){
  	 this.showModel = true
  	 this.endOrderDic.orderId = item.id
  	 this.endOrderDic.orderSn = item.orderSn
  }
  //结束订单问题 选择
  endOrderShow(){
  	  this.isEndOrder = !this.isEndOrder
  }
  //结束订单问题 选择 确认按钮
  endOrderChange(data:any) {
  	this.isEndOrder = !this.isEndOrder
  	this.endOrderDic.code = data[0].value
  	this.endOrderDic.name = data[0].label
  }
  confirmModel(){
	  if(this.endOrderDic.name==''){
	  		  uni.showToast({
	  			title: '请选择结束订单类型',
	  			icon: 'none',
	  			duration: 2000
	  		  });
	  		  return
	  }
	  if(this.endOrderDic.name=='指定金额' && this.endOrderDic.money == ''){
	  		  uni.showToast({
	  			title: '请填写指定金额',
	  			icon: 'none',
	  			duration: 2000
	  		  });
	  		  return
	  }
  	  uni.showLoading({
  	  	title: '加载中'
  	  });
  	  let params = {
  	  	orderSn:this.endOrderDic.orderSn,//订单号
  		endOrderStatus:this.endOrderDic.code,//结束订单类型
  		endOrderMoney:this.endOrderDic.money,//指定扣除金额
  		description:this.endOrderDic.description,//备注
  	  };
  	  endOrder(params).then((res: any) => {
  		  uni.hideLoading();
  		  // console.log('手动取消订单：',res)
  	      if(res.data.code==200){
  			uni.showToast({
  				title: '手动取消订单成功',
  				icon: 'none',
  				duration: 2000
  			});
  			this.orderListData(this.pageN);//手动取消订单成功后刷新页面
  	      }else{
  			  uni.showToast({
  				title: res.data.message,
  				icon: 'none',
  				duration: 2000
  			  });
  	      }
  	  
  	  });
  }
  //拉取网络数据
  orderListData(page:number){
  	  uni.showLoading({
  	  	title: '加载中'
  	  });
  	  let params = {
  	    orderStatus: "timeout",   //查询条件 - 订单状态 timeout：超时  end：完结   ing：租赁中
  	    pageNo: page,
  		pageSize: 10,
  		userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  userOrderListRenting(params).then((res: any) => {
		  console.log('超时订单结果：'+JSON.stringify(res.data));
  	      if(res.data.code==200){
			  var boolee = res.data.hasNext == false && this.continueTypes == false;
			  if (res.data.hasNext == true) {
			    this.status = "more";
			  } else {
			    this.status = "noMore";
			  }
			  console.log(res.data.hasNext, this.continueTypes, boolee);
			  if (res.data.isFirst || !boolee) {
					if (res.data.hasNext == false) {
					  this.continueTypes = false;
					}
					if(this.repairLists.length>0 && this.pageN==1){//刷新  删除已有数据
					  this.repairLists = [];
					}
					this.repairLists = this.repairLists.concat(res.data.data)
					// this.repairLists = res.data.data
					uni.hideLoading();
			  }
			  // this.repairLists = res.data.data
			  // uni.hideLoading();
  	      }else{
			  uni.hideLoading();
			  uni.showToast({
					title: '数据加载失败',
					icon: 'none',
					duration: 2000
			  });
  	      }
  	  });
  }
}
</script>

<style  lang="scss"  scoped>
.searchPP {
  background-color: white;
  padding: 0.5rem;

  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.repairLists-top{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.5rem;
border-bottom: 1px solid #e8e8e8;

}

.classesifyP {
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 1rem;
  background-color: white;
}

.classesify {
  width: 4rem;
  height: 1.5rem;
  border: 1px solid #02af74;

  display: flex;
  align-items: center;
  border-radius: 10px;
  /* //   background-color: red; */
}

.classesify-puc {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
.classesify-pucs {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.classesify-bus {
  width: 50%;
  font-size: 0.6rem;
}
.classesify-buss {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}

.totle-price{
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: #f3f5f7;
     padding: 0.2rem 0.5rem;
}
.totle-price-text{

font-size: 0.73rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
}
.totle-price-text span{

font-size: 0.73rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;
}


.repairLists{

 background-color: white;
 margin-bottom: 1rem;
 border-radius: 0.2rem;
 /* padding: 1rem; */
 /* margin: 1rem; */
 
 }
 
 .repairLists-child{
 
  border-bottom: 1px solid #E5E5E5;
 }
.repairLists-head{
   padding: 1rem;
}

.repairBtn{
width: 4.5rem;
height: 1.5rem;
background: #FFFFFF;
border: 1px solid #02AF74;
border-radius: 0.3rem;
font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 300;
color: #02B074;
text-align: center;
align-items: center;
line-height: 1.5rem;

}
</style>